import React, {useState, useCallback} from 'react';
import {Typography, Form, Row, Col, Space, Button, Input, Radio} from 'antd';
import {withRouter} from 'react-router-dom';
import {useMount, useInterval, useDebounceFn} from 'ahooks';
import {dimensionMap} from '../config.js';
import LiveRoomInformation from './LiveRoomInformation';
import Charts from './Charts';

import '../style.styl';


const {Title} = Typography;

const layout = {
    labelCol: {span: 6},
    wrapperCol: {span: 16}
};
const defaultInterval = 60 * 1000;


const RoomDetail = props => {
    const {
        match: {
            params: {roomId}
        },
        history
    } = props;

    const [form] = Form.useForm();

    // 刷新间隔时间
    const [interval, setInterval] = useState(null);
    // 是否实时刷新
    const [refreshValue, setRefreshValue] = useState(1);
    const [searchParams, setSearchParams] = useState([]);
    const [client, setClient] = useState('全部');
    const [formLoading, setFormLoading] = useState(false);


    const handleFinish = useCallback(values => {
        const keys = Object.keys(values);
        const {LiveRoomDetail_select_room_number: roomNumber} = values;
        if (roomId && roomId !== '580' && roomNumber !== roomId) {
            history.push(`/liveMonitor/detail/${roomNumber}`);
        }
        const array = keys?.map(i => ({
            dimensionId: i,
            dimensionName: dimensionMap.get(i),
            value: [values[i]]
        }));
        // const object = {
        //     dimensionId: 'LiveRoomDetail_select_client_type',
        //     dimensionName: 'client_type',
        //     values: [client]
        // };
        // array.push(object);
        // console.log(array);
        setSearchParams(array);
    }, [roomId, history]);

    const {run: handleDebounceFinish} = useDebounceFn(values => {
        handleFinish(values);
    }, {wait: 500});


    const handleRefreshChange = e => {
        const {
            target: {value}
        } = e;

        setRefreshValue(value);
        if (value === 1) {
            setInterval(null);
        }
        if (value === 2) {
            setInterval(defaultInterval);
        }
    };

    useInterval(
        () => {
            form.submit();
        },
        interval,
        {immediate: false}
    );

    useMount(() => {
        // 已和pm确认，直播间id不可能是580
        if (roomId && roomId !== '580') {
            form.setFieldsValue({
                /* eslint-disable quote-props */
                'LiveRoomDetail_select_room_number': roomId,
            });
            form.submit();
        }
    });


    return (
        <div className="liveBoard">
            <Title level={3}>
                直播间监控详情
                {roomId?.length > 3 ? ` - ${roomId || ''}` : ''}
                <div className="detail-refresh-btn">
                    <Radio.Group
                        options={[
                            {label: '手动刷新', value: 1},
                            {label: '实时刷新', value: 2},
                        ]}
                        optionType="button"
                        buttonStyle="solid"
                        onChange={handleRefreshChange}
                        value={refreshValue}
                    />
                </div>
            </Title>
            <Form
                className="detail-search-form"
                {...layout}
                form={form}
                initialValues={{live: 1, roomID: roomId}}
                onFinish={handleDebounceFinish}
            >
                <Row>
                    <Col span={8}>
                        <Form.Item
                            label="直播间"
                            name="LiveRoomDetail_select_room_number"
                            rules={[{required: true}]}
                        >
                            <Input placeholder="直播间房间号" allowClear />
                        </Form.Item>
                    </Col>

                    <Col span={16} className="btn-col">
                        <Space>
                            <Button type="primary" htmlType="submit" loading={formLoading}>
                                搜索
                            </Button>
                        </Space>
                    </Col>
                </Row>
            </Form>
            <div className="detail-h4-title">
                直播间详情
            </div>
            <div className="detail-search-result">
                <LiveRoomInformation
                    params={searchParams}
                    setFormLoading={setFormLoading}
                />
            </div>
            <Charts
                params={searchParams}
                client={client}
                setClient={setClient}
                setFormLoading={setFormLoading}
            />
        </div>
    );
};

export default withRouter(RoomDetail);
